
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>帮助中心列表管理</title>
<script type="text/javascript">
$(document).ready(function(){		
	
	var categoryid = $('#hidden_categoryid').val();
	
	$('#ArticleCategoryId').children().each(function(index,element){
		if($(element).val() == ArticleCategoryId) {				
			$(element).attr('selected','selected');												
		}			
	});	
	
		$('#treebutton').html($("#ArticleCategoryId").find("option:selected").text() + '<i class="fa fa-angle-down"></i>');
		$("#ArticleCategoryId").change(function(){$('#treebutton').html($("#ArticleCategoryId").find("option:selected").text() + '<i class="fa fa-angle-down"></i>'); });
		
	
});
</script>
</head>
<body>
<div layout:fragment="content">
 <link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css"/>
<link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal.css"/>
<link th:href="@{/plugins/zTree/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet" href="plugins/zTree/css/zTreeStyle/zTreeStyle.css"/>
<script th:src="@{/plugins/zTree/js/jquery.ztree.core-3.5.js}" src="plugins/zTree/js/jquery.ztree.core-3.5.js" type="text/javascript"></script>

		<div class="row">
			<div class="table-toolbar col-md-12">
				<div class="table-toolbar col-md-12">
					<div class="btn-group pull-right"><a href="edit.html" th:href="@{/article/list/add}" id="Link_add" class="btn green">添加文章<i class="fa fa-plus"></i></a></div>
				</div>
				<div class="col-md-15 col-sm-13">
			
					<form class="form-inline" th:action="@{/article/list/index}" th:object="${articleSearch}"  method="post">
					
							
						<div class="form-group">
				            <select th:field="*{ArticleCategoryId}"  id="ArticleCategoryId" name="ArticleCategoryId"  style="width:250px;display:none;" th:remove="none" class="form-control">
				            	<option value="">所有分类</option>
				                <option style="display:none"  th:each="eachValue : ${categories}"  th:value="${eachValue.id}"   th:text="${eachValue.name}"></option>
				            </select>
				            <button id="treebutton" class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown">
									分类 <i class="fa fa-angle-down"></i>
							</button>
							<div class="dropdown-menu dropdown-content input-large">
								<div id="category_tree" role="menu"></div>
							</div>
								
				            <input type="hidden" id="hidden_categoryid" th:value="${ArticleCategoryId}" /> 														
						</div>
						
							
						
						<div class="form-group">
						    <label class="sr-only" for="articlename">文章标题</label>
							<input type="text" name="ArticleTitle" th:field="*{ArticleTitle}" style="width:200px;" placeholder="文章标题"   id="ArticleTitle" class="form-control" />
						</div> 
						
						<button type="submit" id="bt_search" name="bt_search" class="btn green">
							<i class="fa  fa-search"></i>
						</button>
					</form>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div id="div_article_list" th:include="article/list/article_table">
                   
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script th:src="@{/plugins/jstree/dist/jstree.min.js}" src="plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	
	    $('#category_tree').jstree({
            "core" : {
                'data' : {'url' : function (node) {return '/tree/categoryArticle';}}
            }
        });
        
	    $('#category_tree').on('select_node.jstree', function(e,data) { 
	    	checkCat(data.node.id);       
	    });
	    
	  //转移分类 Start
	     $('#category_tree2').jstree({
            "core" : {
                'data' : {'url' : function (node) {return '/tree/categoryArticle';}}
            }
        });
        
	    $('#category_tree2').on('select_node.jstree', function(e,data) { 
	    	checkCat(data.node.id);       
	    }); 
	    
	   //转移分类 End
	    
	    var result;
	    function getCategoryById(id,categories){   	
	    	$(categories).each(function() { 
	    		if(this.id == id)result = this; 
	    		console.log(this.id);
		    	if(result){
		    		console.log('find it' + result);
		    		return result;
		    	}else{
		    		console.log('not find ,try sub cat' + result);
		    		result = getCategoryById(id,this.children);
		    		return result;
		    	}
	    	});
			return result;
	    }
	    
	    function addSubCategoriesToArray(category,array){
	    	//console.log(category.children);
	    	if(category.children){
		    	$(category.children).each(function() {
		    		console.log(this);
		    		array[array.length] = this.id;	 
		    		console.log(this.children);   		
		    		if(this.children)addSubCategoriesToArray(this.children,array);
		    	});
	    	}
	    }
	    
function checkCat(id){

	   $("#ArticleCategoryId option").each(function() { this.selected = (this.value == id); });
	   $("#ArticleCategoryId").change();
	   $("#tree_modal").modal('hide');	
	   
	   $("#categorytable option").each(function() { this.selected = (this.value == id); });
	   $("#categorytable").change();
	   $("#tree_modal").modal('hide');
}
	 
   
	    
/*]]>*/
</script>	

